<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Profile</title>
<style type="text/css">
            .inputError {
                border: 1px solid red !important;
                color: red;
            }
            .divError {
                color: red;
            }
</style>
</head>
<body class="skin-blue">
        <!-- header logo: style can be found in header.less -->
        <%@include file="Head-Banner.jsp" %>
        <div class="wrapper row-offcanvas row-offcanvas-left">
            <!-- Left side column. contains the logo and sidebar -->
            <%@include file="Left-Banner.jsp" %>
            <!-- Right side column. Contains the navbar and content of the page -->
            <aside class="right-side">                
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1>
                        Password Management
                    </h1>
                </section>
                <!-- Main content -->
                <section class="content">
                
                    <div class="form-box" id="">
                        <form action="user" id="changePasswordForm" method="post">
                        <input type="hidden" name="action" value="changepassword"/>
                        <input type="hidden" name="username" value="${sessionScope.account.userName}"/>
                            <div class="body bg-gray">
                                <div class="form-group">
                                    <input type="password" name="oldPassword" id="oldPassword" class="form-control" placeholder="Current Password"/>
                                </div>
                                <div class="form-group">
                                    <input type="password" name="newpassword" id="newpassword" class="form-control" placeholder="New Password"/>
                                </div>    
                                <div class="form-group">
                                    <input type="password" name="confirmPassword" id="confirmPassword" class="form-control" placeholder="Confirm New Password"/>
                                </div>    
                            </div>
                            <div class="footer bg-gray" style="background-color: #444444;">                                                               
                                <a><button type="submit" class="btn bg-olive btn-block">Change your password</button></a>
                                <br>
                                <a href="profile.jsp"><button type="button" class="btn bg-olive btn-block">Back</button> </a>
                            </div>
                            <h4 style="color: red">${messageChangePassword}</h4>
                        </form>
                    </div>
                    
                </section><!-- /.content -->
            </aside><!-- /.right-side -->
        </div><!-- ./wrapper -->
    </body>
    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#changePasswordForm").validate({
                errorElement: "div",
                errorClass: "divError",
                rules: {
                	oldPassword: {
                        required: true,
                        rangelength: [6, 18]
                    },
                    newpassword: {
                        required: true,
                        rangelength: [6, 18]
                    },
                    confirmPassword: {
                        required: true,
                    	equalTo: "#newpassword"
                    }
                },
                messages: {
                	oldPassword: {
                        required: "Tell us your number to recover your password",
                        rangelength: "Error invalid number. Please re-send using a valid 9 or 10 digit mobile number"
                    },
                    newpassword: {
                        required: "What's your new password",
                        rangelength: "Enter your new password at least six numbers"
                    },
                    confirmPassword: {
                        required: "You must enter the same password twice in order to confirm it",
                        equalTo: "Passwords do not match"
                    }
                }
            });
        });
    </script>
</html>